<template>
	<view>
		<view class="">
			<title>添加照片</title>
			<up-upload :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1" multiple
				:maxCount="10"></up-upload>
		</view>

		<view class="">
			<title>添加视频</title>
			<videos :getvideos='getvideos'></videos>
		</view>



		<fui-input v-model="title" placeholder="填写标题会更多赞噢~"></fui-input>
		<textarea v-model="content" placeholder="添加正文" name="" id="" cols="50" rows="50" class="textarea"></textarea>

		<view class="anniu" style="display: flex;">
			<button
				style="background-color: #f2f4f9; width: 100px; border-radius: 50rpx;margin-left: 20rpx;z-index: 1000;"
				@click="show = true">#话题</button>
			<button
				style="background-color: #f2f4f9; width: 100px; border-radius: 50rpx;margin-left: -260rpx;z-index: 1000;"
				@click="show1 = true">@用户</button>
		</view>
		<!-- 话题弹出层 -->
		<view>
			<up-popup :round="10" :show="show" @close="close" @open="open">
				<view class="u-page" style="height: 40vh;z-index: 1000;overflow: auto;">
					<view @click="content = content + item "
						style="padding-left: 20rpx;height: 100rpx;line-height: 100rpx;border-bottom: 2rpx solid #eee;"
						v-for="item in huatiList" :key="item">{{item}}</view>
				</view>
			</up-popup>
		</view>
		<!-- 用户弹出层 -->
		<view>
			<up-popup :round="10" :show="show1" @close="close1" @open="open1">
				<view class="u-page" style="height: 40vh;z-index: 1000;overflow: auto;">
					<view @click="content = content + '@' + item.name "
						style="display: flex;height: 100rpx;line-height: 100rpx;" v-for="item,index in stars"
						:key="index">
						<up-avatar :src="item.image_url"></up-avatar>
						<text style="margin-left: 40rpx;">{{item.name}}</text>

					</view>
				</view>
			</up-popup>
		</view>
		<view class="fa_buttom">
			<view @click="dizhi" class="">
				<image src="../../static/发布图片/导航.png" style="width: 55rpx;height: 55rpx;margin-left: 20rpx;" mode="">
				</image>
				<text style="margin-left: 40rpx; position: relative;top: -14rpx;">添加地址</text>
				<image src="../../static/发布图片/右箭头.png"
					style="width: 45rpx; height: 45rpx;position: absolute;right: 20rpx;top: 35rpx;" mode=""></image>
			</view>
			<view class="" @click="gongkai">
				<image src="../../static/发布图片/锁子.png" style="width: 55rpx;height: 55rpx;margin-left: 20rpx;" mode="">
				</image>
				<text style="margin-left: 40rpx; position: relative;top: -14rpx;">公开课间</text>
				<image src="../../static/发布图片/右箭头.png"
					style="width: 45rpx; height: 45rpx;position: absolute;right: 20rpx;top: 165rpx;" mode=""></image>
			</view>
		</view>

		<view class="" style="position: relative;display: flex;padding: 20rpx;">
			<view class="" style="display: flex;flex-direction: column;align-items: center;margin:0 25rpx;">
				<image @click="caogao" style="width: 60rpx; height: 60rpx;" src="../../static/发布图片/草稿.png" mode="">
				</image>
				<text style="">存草稿</text>
			</view>
			<button style="width: 75%;  background-color: #fabc22; color: #fff;" @click="fabu">发布笔记</button>
		</view>
	</view>
	<!-- 成功提示信息 -->
	<view>
		<up-toast ref="uToastRef"></up-toast>
		<up-cell-group title-bg-color="rgb(243, 244, 246)">
			<up-cell :titleStyle="{fontWeight: 500}">
			</up-cell>
		</up-cell-group>
	</view>

</template>

<script>
	export default {
		data() {
		  return {
			  
		  }
		},
		onPullDownRefresh() {
			// 下拉刷新的逻辑  
			console.log("123456")
		},
	}
</script>

<script setup>
	import request from "../../components/promise/promise.js"
	import videos from "../../components/videos/videos.vue"
	import {
		getLocation
	} from "../../utils/authUtils.js"
	import moment from "moment"
	import {
		reactive,
		ref,
		computed
	} from 'vue';


	let sourceType = reactive(['album', 'camera'])
	let title = ref("")
	let videolist = ref([])
	let content = ref("")
	let zhaopian = ref("")
	const emit = defineEmits(["getvideo"])
	const fileList1 = ref([]);
	const fileList = ref([])
	const show2 = ref(false);
	const list = ref([{
		type: 'success',
		title: '成功主题(带图标)',
		message: "发布成功",
		iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/success.png'
	}, ]);

	let dizhi = async () => {
		let res = await getLocation(0, this)
		console.log(888888888, res);
	}

	// 计算属性  
	const getIcon = computed(() => {
		return path => {
			return 'https://cdn.uviewui.com/uview/example/' + path + '.png';
		}
	});

	// 方法
	const uToastRef = ref(null)

	function showToast(params) {
		uToastRef.value.show({
			...params,
			complete() {
				params.url && uni.navigateTo({
					url: params.url
				});
			}
		});
	}
	let huatiList = ref([
		"#约拍攻略",
		"#时尚穿搭",
		"#美丽风景",
		"#婚礼现场",
		"#家居照片",
		"#氛围感大片"
	])

	let stars = [{
			"name": "陈伟霆",
			"image_url": "https://t12.baidu.com/it/u=1905996058,438012250&fm=58&app=83&f=JPEG?w=250&h=250"
		},
		{
			"name": "易烊千玺",
			"image_url": "https://t10.baidu.com/it/u=1063014698,2373239374&fm=58&app=83&f=JPEG?w=250&h=250"
		},
		{
			"name": "彭于晏",
			"image_url": "https://img1.baidu.com/it/u=852527378,739232243&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1715706000&t=0b7adab4d39285da32f6a9df19e611d9"
		},
		{
			"name": "张颂文",
			"image_url": "https://t12.baidu.com/it/u=1125198732,3395860311&fm=58&app=83&f=JPEG?w=250&h=250"
		},
		{
			"name": "周杰伦",
			"image_url": "https://img2.baidu.com/it/u=2943584896,3225909487&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1715706000&t=556cd31cf7621d98df2be71f65e27012"
		},
		{
			"name": "张鲁一",
			"image_url": "https://t10.baidu.com/it/u=3238290045,1643219942&fm=58&app=83&f=JPEG?w=250&h=250"
		},
		{
			"name": "李晨",
			"image_url": "https://t10.baidu.com/it/u=3338711643,3568589227&fm=58"
		},
		{
			"name": "霍建华",
			"image_url": "https://t11.baidu.com/it/u=3438437392,1752928559&fm=58&app=83&f=JPEG?w=250&h=250&s=0830CD122D33F2942CC054FF03001060"
		},
		{
			"name": "胡歌",
			"image_url": "https://t12.baidu.com/it/u=3827930600,2459007501&fm=58&app=83&f=JPEG?w=250&h=250&s=5BD4AB448E337694C10C4D920300509B"
		},
		{
			"name": "张国荣",
			"image_url": "https://t12.baidu.com/it/u=1612621691,2194244131&fm=58&app=83&f=JPEG?w=250&h=250"
		},
	]

	let caogao = () => {
		uni.showToast({
			title: "功能暂未开发",
			icon: "none"
		})
	}


	let gongkai = () => {
		uni.showToast({
			title: "功能暂未开发",
			icon: "none"
		})
	}
	let now = moment();
	const fabu = async () => {
		let address = uni.getStorageSync('data')
		if (fileList1.value.length > 0) {
			if (address.name != "") {
				uni.showToast({
					title: "发布成功",
					icon: "none"
				})
				//获取用户地理位置

				let data = {
					time: now.format('HH:mm'),
					addressObj: {
						name: address.name,
						address: address.address
					},
					image: fileList.value,
					videolist: videolist.value,
					title: title.value,
					content: content.value,
					user: {
						name: "nairenk",
						avatar: "https://avatars2.githubusercontent.com/u/24265249?s=40&v=4"
					},
					like: {
						likes: 0,
						ifLike: false
					},
					data: [{
						_id: "1a",
						name: "约拍官方",
						content: "这里是官方",
						img: "https://img.lenovomm.com/ali/icon/app-img-lestore/9789-2018-12-19072151-1545218511364.png"
					}, ]
				}
				let {
					data: {
						code
					}
				} = await request({
					url: "http://47.93.162.7:3000/fabu",
					method: "POST",
					data: data
				})
				if (code == 200) {
					showToast(list.value[0])
					uni.reLaunch({
						url: "/pages/my/my"
					})
				}

			} else {
				uni.showToast({
					title: "请选择发布地址吧~",
					icon: "none"
				})
			}


		} else {
			uni.showToast({
				title: "选择一个封面吧~~",
				icon: "none"
			})
		}

	}

	// 创建响应式数据  
	const show1 = ref(false);

	// 定义方法  
	function open1() {
		// 打开逻辑，比如设置 show 为 true  
		show1.value = true;
		// console.log('open');  
	}

	function close1() {
		// 关闭逻辑，设置 show 为 false  
		show1.value = false;
		// console.log('close');  
	}


	// 创建响应式数据  
	const show = ref(false);

	// 定义方法  
	function open() {
		// 打开逻辑，比如设置 show 为 true  
		show.value = true;
		// console.log('open');  
	}

	function close() {
		// 关闭逻辑，设置 show 为 false  
		show.value = false;
		// console.log('close');  
	}


	// 删除图片
	const deletePic = (event) => {
		fileList1.value.splice(event.index, 1);
	};

	// 新增图片
	const afterRead = async (event) => {
		// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
		let lists = [].concat(event.file);
		let fileListLen = fileList1.value.length;
		lists.map((item) => {
			fileList1.value.push({
				...item,
				status: 'uploading',
				message: '上传中',
			});
		});
		for (let i = 0; i < lists.length; i++) {
			const result = await uploadFilePromise(lists[i].url);
			let item = fileList1.value[fileListLen];
			fileList1.value.splice(fileListLen, 1, {
				...item,
				status: 'success',
				message: '',
				url: result,
			});
			fileListLen++;
		}
	};

	const uploadFilePromise = (url) => {
		return new Promise((resolve, reject) => {
			let a = uni.uploadFile({
				url: 'http://47.93.162.7:3000/upload',
				filePath: url,
				name: 'file',
				formData: {
					user: 'test',
				},
				success: (res) => {
					setTimeout(() => {
						resolve(res.data.data);
						let a = JSON.parse(res.data).path
						let newa = a.replace(/\\/g, '/');
						fileList.value.push(newa)
					}, 1000);
				},
			});
		});
	};

	let getvideos = (value) => {
		videolist.value = value
	}
</script>



<style scoped>
	.textarea {
		padding: 20rpx;
		border: 1px rgba(100, 100, 100, 0.3) solid;
		box-sizing: border-box;
		width: 100%;
		height: 550rpx;
	}

	.textarea::placeholder {
		color: #bdbdbd;
	}

	.anniu button:nth-child(1) {
		position: relative;
		bottom: 140rpx;
	}

	.anniu button:nth-child(2) {
		position: relative;
		bottom: 140rpx;
	}

	.fa_buttom {
		width: 100%;
		height: 270rpx;
		position: relative;
	}

	.fa_buttom view:nth-child(1) {
		height: 135rpx;
		line-height: 135rpx;
	}

	.fa_buttom view:nth-child(2) {
		height: 135rpx;
		line-height: 135rpx;
	}

	.u-page {
		padding: 0;
	}

	.u-cell-icon {
		width: 36rpx;
		height: 36rpx;
		margin-right: 8rpx;
	}

	.u-cell-group__title__text {
		font-weight: bold;
	}
</style>